<template>
  <div>
    <header-component></header-component>
    <!--公告-->
    <div class="game_list">
      <p class="game_list_1">{{$t('gameList.dividend_total')}}</p>
      <p class="game_list_2">{{statisticsData.amount | sliceNumUnite('num')}}<span></span></p>
      <p class="game_list_1">{{statisticsData.amount | sliceNumUnite('unite')}}</p>
      <p class="game_list_1">{{$t('gameList.game_token')}}</p>
      <p class="game_list_2">{{statisticsData.mining | sliceNumUnite('num')}}</p>
      <p class="game_list_1">{{statisticsData.mining | sliceNumUnite('unite')}}</p>
      <p class="game_list_1">{{$t('gameList.rab_dividend')}}</p>
      <p class="game_list_2">{{perRab}}</p>
      <p class="game_list_1">EOS</p>
      <div class="game_list_one fl">
        <!--<a @click="goPage('index')" href="javascript:;">-->
          <div @click="goPage('index')" class="game_list_one_img">
            <img src="../assets/image/game7.png" alt="">
          </div>
          <p class="game_list_one_p">{{$t('gameList.track_sprint')}}</p>
          <p>{{$t('gameList.track_sprint_des')}}</p>
        <!--</a>-->
      </div>
      <div @click="showMessage($t('gameList.dev_hint'))" class="game_list_one fl">
        <div class="game_list_one_img">
          <img src="../assets/image/game5.png" alt="">
        </div>
        <p class="game_list_one_p">{{$t('gameList.sic_bo')}}</p>
        <p>{{$t('gameList.sic_bo_des')}}</p>
      </div>
      <div @click="showMessage($t('gameList.later_hint'))" class="game_list_one fl">
        <div class="game_list_one_img">
          <img src="../assets/image/game6.png" alt="">
        </div>
        <p class="game_list_one_p">{{$t('gameList.fried_flower')}}</p>
        <p>{{$t('gameList.fried_flower_des')}}</p>
      </div>
      <div @click="showMessage($t('gameList.later_hint'))"  class="game_list_one fl">
        <div class="game_list_one_img">
          <img src="../assets/image/game2.png" alt="">
        </div>
        <p class="game_list_one_p">{{$t('gameList.texas_poker')}}</p>
        <p>{{$t('gameList.texas_poker_des')}}</p>
      </div>
      <div @click="showMessage($t('gameList.later_hint'))"  class="game_list_one fl">
        <div class="game_list_one_img">
          <img src="../assets/image/game8.png" alt="">
        </div>
        <p class="game_list_one_p">{{$t('gameList.monopoly')}}</p>
        <p>{{$t('gameList.monopoly_des')}}</p>
      </div>
      <div @click="showMessage($t('gameList.later_hint'))"  class="game_list_one fl">
        <div class="game_list_one_img">
          <img src="../assets/image/gameMORE.png" alt="">
        </div>
        <p class="game_list_one_p">{{$t('gameList.more_game')}}</p>
        <p>{{$t('gameList.welcome_join')}}</p>
      </div>

    </div>
    <footer-component></footer-component>
  </div>
</template>

<script>
import headerComponent from '@/view/common/header'
import footerComponent from '@/view/common/footer'

export default {
  name: 'name',
  data () {
    return {
      statisticsData: {
        amount: '0.0',
        mining: '0.0'
      }, // 统计数据
      perRab: 0
    }
  },
  components: {
    headerComponent,
    footerComponent
  },
  created () {
    console.log('created')
    this.getData()
  },
  methods: {
    goPage (name) {
      this.$router.push({name: name})
    },
    showMessage (msg) {
      if (msg) {
        this.$message(msg)
      }
    },
    async getData () {
      await this.$scatterJs.scatter.connect(this.$config.gameName)
      console.log(this.$scatterJs.scatter)
      let eos = this.$scatterJs.scatter.eos(this.$config.network, this.$eosjs)
      eos.getTableRows({
        code: this.$config.cont_owner,
        scope: this.$config.cont_owner,
        table: 'other',
        json: true
      }).then(res => {
        this.statisticsData = res.rows[0]
        var raiserab = parseFloat(this.statisticsData.raiserab.replace(' RAB', ''))
        var mining = parseFloat(this.statisticsData.mining.replace(' RAB', ''))
        var amount = parseFloat(this.statisticsData.amount.replace(' EOS', ''))
        this.perRab = ((amount / (raiserab + mining)) * 10000).toFixed(4)
        // this.rabDividend = parseFloat(this.statisticsData.)
        console.log('table other:', this.statisticsData)
      }).catch(e => {
        console.log('other table e:', e)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
